<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小米侧边栏布局设计</title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			width: 1200px;
			height: 400px;
			background-color: #4C4C4C;
			margin: 0 auto;
		}

		.left {
			float: left;
			width: 230px;
			height: 460px;
			background-color: #7e7e7e;
		}

		.right {
			float: left;
			width: 970px;
			height: 460px;
			background-color: #333333;
		}
		
		.left ul li:hover {
			background-color: #ff6700;
		}

		li {
			list-style: none;
		}
		.left ul{
			margin-top: 15px;
		}

		.left ul li {
			line-height: 70px;
		}

		.left ul li a {
			font-size: 20px;
			color: #FFF;
			text-decoration: none;
			margin: 40px;
		}
	</style>
	<body>
		<div class="box">
			<div class="left">
				<ul>
					<li><a href="#">手机电话卡</a></li>
					<li><a href="#">电视盒子</a></li>
					<li><a href="#">出行穿戴</a></li>
					<li><a href="#">智能路由器</a></li>
					<li><a href="#">健康儿童</a></li>
					<li><a href="#">耳机音响</a></li>
				</ul>
			</div>
			<div class="right"></div>
		</div>
	</body>
</html>
